const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        "index": path.resolve(__dirname, 'src/index.js')
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 将css文件单独抽取到css文件夹中
                            publicPath: './css',
                        },
                    },
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[hash:6].[ext]',
                        // 图片小于200kb均会打包到bundle.js中，图片大于200k才会单独打包成一个图片文件
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                publicPath: '../',
                                name: 'images/[name].[hash:6].[ext]'
                            }
                        }
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].[name].css"
        }),
        new HtmlWebpackPlugin({
            filename: 'view/index.html',
            template: './src/index.html'
        })
    ]
}